﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<form id="form1">
    <div style="margin:20px;">
        <table class="form">
            <tr>
                <th class="formTitle">攻略标题</th>
                <td class="formValue" colspan="3">
                    <input id="F_title" name="F_title" type="text" class="form-control required" placeholder="请录入攻略标题" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">攻略概要</th>
                <td class="formValue" colspan="3">
                    <textarea id="F_outline" name="F_outline" class="form-control" rows="4" placeholder="请录入攻略概要"></textarea>
                </td>
            </tr>
            <tr>
                <th class="formTitle" valign="top" style="padding-top: 5px;">
                    攻略内容
                </th>
                <td class="formValue" colspan="3">
                    <div class="mail-body" style="padding: 0px;">
                        @*<textarea id="F_content" name="F_content" class="form-control" rows="15" style="height:400px;" placeholder="请录入攻略内容"></textarea>*@
                        <script id="F_content" name="F_content" type="text/plain" style="width:100%;height:400px;">
                        </script>
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle">上传编辑器内的显示图片</th>
                <td class="formValue">
                    <input id="F_img" type="file" class="form-control" accept="image/png,image/jpeg,image/gif">
                </td>
                <td class="formValue">
                    <input type="button" value="上传" class=" btn btn-primary" id="F_imgBtn">
                    <input type="button" value="复制图片路劲" class="btn btn-primary" id="copy_imgurlBtn">
                </td>
                <th class="formTitle"></th>
            </tr>
            <tr>
                <th></th>
                <td class="formValue" colspan="3">
                    <input type="text" id="F_imgurl" class="form-control" name="F_imgurl" value="" placeholder="上传成功后的图片路劲" />
                </td>
            </tr>
        </table>

    </div>
</form>

@section Content {
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>

        var editor;
        var keyValue = $.request("keyValue");
        $(function () {
            editor = UE.getEditor('F_content');
            if (!!keyValue) {
                $.ajax({
                    url: "/MiniSite/Strategy/GetFormJson",
                    data: { keyValue: keyValue },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#form1").formSerialize(data);
                        //editor.setContent(data.F_content);
                    }
                });
            }
        });
        function submitForm() {
            if (!editor.hasContents()) {
                $.modalMsg("请添加攻略内容!", "success");
                return false;
            }
            var params = $("#form1").formSerialize();
            $.extend(params, {
                F_content: editor.getContent()
            });

            if (!$('#form1').formValid()) {
                return false;
            }
            $.submitForm({
                url: "/MiniSite/Strategy/SubmitForm?keyValue=" + keyValue,
                param: params,
                success: function () {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            })
        }

        $("#F_imgBtn").on('click', function () {
            var argsId = "F_img";
            var hrefId = "F_imgurl";
            uploadSend(argsId, hrefId);

        })
        $("#F_MainimgBtn").on('click', function () {
            var argsId = "F_Mainimg";
            var hrefId = "F_MainimgUrl";
            uploadSend(argsId, hrefId);

        })
        $("#copy_imgurlBtn").on('click', function () {
            var Url2 = document.getElementById("F_imgurl");
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            $.modalMsg("已复制", "success");
        });
        function uploadSend(argsId, hrefId) {
            var data = new FormData();
            var item = document.getElementById(argsId);


            if (item != null) {
                var file = item.files[0];
                fileSize = file.size;
                fileSize = Math.round(fileSize / 1024 * 100) / 100; //kb
                if (fileSize > 2048) {
                    $.modalMsg('该文件超过2mb，请上传2mb以内的图片！', 'error');
                    return false;
                }
                data.append(file.name, file);
                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    data = JSON.parse(xhr.responseText);
                    if (data.state == 1) {
                        console.log(data);
                        document.getElementById(hrefId).value = data.data + "-400x267";
                        $.modalMsg("上传成功", "success");
                    } else {
                        alert(data.msg);
                    }
                };
                xhr.onerror = function (err) {
                    console.error(err);
                    document.getElementById(hrefId).value = '';
                };
                xhr.open('post', '/SiteManage/Site/UploadAttachment', true);
                xhr.send(data);
            }
        }
    </script>
}

